<template>
  <el-container>
    <el-header>
      <h2>服务配置</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="200px">
        <!-- WMS 服务配置 -->
        <el-form-item label="WMS 服务配置">
          <el-select v-model="form.wmsService" placeholder="请选择服务配置">
            <el-option
              v-for="option in wmsOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>

        <!-- WMTS 服务瓦片大小 -->
        <el-form-item label="WMTS 服务瓦片大小">
          <el-select v-model="form.wmtsTileSize" placeholder="请选择瓦片大小">
            <el-option label="256*256" value="256*256" />
            <el-option label="512*512" value="512*512" />
            <el-option label="1024*1024" value="1024*1024" />
            <el-option label="2048*2048" value="2048*2048" />
            <el-option label="4096*4096" value="4096*4096" />
          </el-select>
        </el-form-item>

        <!-- 请求并发限制 -->
        <el-form-item label="请求并发限制">
          <el-input
            v-model.number="form.concurrentLimit"
            type="number"
            placeholder="输入0-255之间的数"
            min="0"
            max="255"
          />
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      wmsService: "将地图影像返回到客户端作为响应", // WMS 服务配置
      wmtsTileSize: "256*256", // 默认瓦片大小
      concurrentLimit: 0 // 默认并发限制
    });

    // WMS 服务配置选项，value 值与 label 值一致
    const wmsOptions = [
      {
        label: "将功能信息返回到客户端作为响应",
        value: "将功能信息返回到客户端作为响应"
      },
      {
        label: "将地图影像返回到客户端作为响应",
        value: "将地图影像返回到客户端作为响应"
      },
      {
        label: "将要素返回到客户端作为响应",
        value: "将要素返回到客户端作为响应"
      },
      {
        label: "将图例影像返回到客户端作为响应",
        value: "将图例影像返回到客户端作为响应"
      },
      {
        label: "将可用的样式信息返回到客户端作为响应",
        value: "将可用的样式信息返回到客户端作为响应"
      },
      {
        label: "将方案返回到客户端作为响应",
        value: "将方案返回到客户端作为响应"
      }
    ];

    // 保存方法
    const save = () => {
      const { concurrentLimit } = form.value;

      // 验证请求并发限制的范围
      if (concurrentLimit < 0 || concurrentLimit > 255) {
        ElMessage.error("请求并发限制必须在0到255之间");
        return;
      }

      ElMessage.success("保存成功！");
      console.log("保存的设置:", form.value);
      // 在这里可以添加实际的保存逻辑，例如 API 请求
    };

    // 取消方法
    const cancel = () => {
      ElMessage.info("取消操作");
      // 取消逻辑，例如重置表单
    };

    return { form, wmsOptions, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
